import React, { Component } from 'react'

import FilterFooter from '../../../../components/FilterFooter'

import styles from './index.module.css'

export default class FilterMore extends Component {

  //在state中添加状态 selectedValues
  state = {
    selectedValues: this.props.more
  }

  //点击标签触发的函数
  onTagClick(value) {
    //判断selectedValues中是否包含当前value值
    //在渲染标签时，判断selectedValues数组中，是否包含当前项的value，包含，就添加高亮类
    const { selectedValues } = this.state
    //创建新数组，尽量不要直接操作原数组
    const newSelectedValues = [...selectedValues]
    //如果不包含，就将当前项的value添加到selectedValues数组中
    if (newSelectedValues.indexOf(value) <= -1) {
      //不包含当前的value
      newSelectedValues.push(value)
    } else {
      //如果包含，就从selectedValues数组中移除（使用数组的splice方法，根据索引号删除）
      const index = newSelectedValues.findIndex(item => item === value)
      newSelectedValues.splice(index, 1)
    }
    this.setState(() => {
      return {
        selectedValues: newSelectedValues
      }
    })
  }

  //清除每个标签内容
  clear = () => {
    this.setState(() => {
      return {
        selectedValues: []
      }
    })

  }

  //确定点击事件,通过props来获取type跟onSave方法
  onOK = () => {
    const { type, onSave } = this.props
    const { selectedValues } = this.state
    onSave(selectedValues, type)
  }


  // 渲染标签
  renderFilters(data) {
    const { selectedValues } = this.state
    // 高亮类名： styles.tagActive
    return (
      data.map(item => {
        const isSelected = selectedValues.indexOf(item.value) > -1
        return (
          //给标签绑定单击事件，通过参数获取到当前项的value
          <span
            key={item.value}
            onClick={() => this.onTagClick(item.value)}
            className={[styles.tag, isSelected ? styles.tagActive : ''].join(' ')}
          >{item.label}</span>
        )
      })
    )
  }

  render() {
    const { data: { roomType, oriented, floor, characteristic }, type, onCancel } = this.props
    return (
      <div className={styles.root}>
        {/* 遮罩层 */}
        <div className={styles.mask} onClick={() => onCancel(type)} />

        {/* 条件内容 */}
        <div className={styles.tags}>
          <dl className={styles.dl}>
            <dt className={styles.dt}>户型</dt>
            <dd className={styles.dd}>{this.renderFilters(roomType)}</dd>

            <dt className={styles.dt}>朝向</dt>
            <dd className={styles.dd}>{this.renderFilters(oriented)}</dd>

            <dt className={styles.dt}>楼层</dt>
            <dd className={styles.dd}>{this.renderFilters(floor)}</dd>

            <dt className={styles.dt}>房屋亮点</dt>
            <dd className={styles.dd}>{this.renderFilters(characteristic)}</dd>
          </dl>
        </div>

        {/* 底部按钮 */}
        <FilterFooter
          className={styles.footer}
          cancelText='清除'
          onCancel={() => this.clear()}
          onOk={() => this.onOK()}
        />
      </div>
    )
  }
}
